<template>
  <div class="dynamic-playground">
    <DemoHeader
      description="AI小鲸弹窗组件连接AI智能体，体验实时对话能力"
      title="实时会话样例"
    />
    <div class="demo-content">
      <FeatureCards />
      <div class="article-section">
        <div class="article-card">
          <h2>使用示例</h2>
          <p>👇 试试选中下面的文本，体验快捷操作功能</p>
          <div
            class="article"
            ai-blueking-hide
          >
            <h3>BK AI: Revolutionizing the Future of Artificial Intelligence</h3>
            <p>{{ article }}</p>
          </div>
          <div class="quick-actions">
            <button
              class="action-btn"
              @click="
                quickActions(
                  {
                    label: '解释',
                    key: 'explanation',
                    prompt: '解释一下内容： {{ SELECTED_TEXT }}',
                  },
                  'BK AI: Revolutionizing the Future of Artificial Intelligence'
                )
              "
            >
              <span class="action-icon">💡</span>
              解释标题
            </button>
            <button
              class="action-btn"
              @click="
                quickActions(
                  { label: '翻译', key: 'translate', prompt: '翻译一下内容： {{ SELECTED_TEXT }}' },
                  'BK AI: Revolutionizing the Future of Artificial Intelligence'
                )
              "
            >
              <span class="action-icon">🌐</span>
              翻译标题
            </button>
          </div>

          <!-- 调试模式下显示日志 -->
          <EventLogger
            v-if="isDebugMode"
            :logs="eventLogs"
            @clear="clearLogs"
          />

          <div class="article-card mt20">
            <h2>测试接口</h2>
            <div class="test-actions">
              <button
                class="action-btn"
                @click="handleAddNewSession"
              >
                新增会话
              </button>
            </div>
            <div class="test-actions">
              <input
                v-model="sessionToUpdate"
                placeholder="要更新的 session code"
              />
              <input
                v-model="newSessionName"
                placeholder="新会话名称"
              />
              <button
                class="action-btn"
                @click="handleUpdateSessionName"
              >
                更新会话名称
              </button>
            </div>
            <div class="test-actions">
              <input
                v-model="sessionToSwitch"
                placeholder="要切换的 session code"
              />
              <button
                class="action-btn"
                @click="handleSwitchToSession"
              >
                切换到指定会话
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div>
        <AIBlueking
          ref="aiBlueking"
          hello-text="bbb"
          :request-options="{
            data: {
              preset: 'QA',
            },
            context: [{ context_test: 'vk' }],
          }"
          :shortcuts="shortcuts"
          :prompts="prompts"
          :url="url"
          teleport-to="body"
          @close="handleClose"
          @shortcut-click="handleShortcutClick"
          @show="handleShowAi"
          @stop="handleStop"
          @dragging="handleDragging"
          @resizing="handleResizing"
          @drag-stop="handleDragStop"
          @resize-stop="handleResizeStop"
          :auto-switch-to-initial-session="false"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';

  import AIBlueking, { AIBluekingExpose, IShortcut } from '../src/vue3.ts';
  import DemoHeader from './components/demo-header.vue';
  import EventLogger from './components/event-logger.vue';
  import FeatureCards from './components/feature-cards.vue';
  import { useEventLogger } from './composables/use-event-logger.ts';

  const shortcuts: IShortcut[] = [
    {
      name: 'Trace 分析',
      icon: '',
      id: 'trace_analysis',
      components: [
        {
          name: '项目名称',
          key: 'project_name',
          type: 'text',
          default: '',
          placeholder: '请输入项目名称',
          required: true,
          fillBack: true,
          fillRegx: /^[a-zA-Z0-9]+$/,
        },
        {
          name: '数量',
          key: 'quantity',
          default: '10',
          type: 'number',
          min: 1,
          max: 100,
          required: true,
          fillBack: false,
        },
        {
          name: '项目描述',
          key: 'description',
          type: 'textarea',
          rows: 4,
          required: false,
          fillBack: false,
        },
        {
          name: '项目类型',
          key: 'project_type',
          type: 'select',
          required: true,
          fillBack: false,
          options: [
            { label: '类型A', value: 'A' },
            { label: '类型B', value: 'B' },
          ],
        },
      ],
    },
    {
      name: '翻译',
      icon: 'bkai-icon bkai-fanyi',
      id: 'translate',
      components: [
        {
          name: '内容',
          key: 'content',
          type: 'textarea',
          default: '',
          placeholder: '请输入项目名称',
          required: false,
          fillBack: true,
        },
      ],
    },
  ];

  const prompts = ['请推荐几本关于人工智能的书籍。', '请用 Python 写一个简单的 Hello World 程序。'];

  // 检查 URL 中是否包含 debug=true
  const isDebugMode = computed(() => {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('debug') === 'true';
  });

  const aiBlueking = ref<AIBluekingExpose | null>(null);

  const url = process.env.BK_API_URL_TMPL || '';

  // 事件日志相关
  const { eventLogs, addLog, clearLogs } = useEventLogger();

  // 修改现有的事件处理方法，添加日志记录
  const handleShowAi = () => {
    addLog('show', 'AI chat window opened');
  };

  const handleClose = () => {
    addLog('close', 'AI chat window closed');
  };

  const quickActions = (shortcut: { label: string; prompt: string; key: string }, cite: string) => {
    aiBlueking.value?.handleShow();

    aiBlueking.value?.sendChat({
      message: shortcut.label,
      cite,
      shortcut,
    });
    addLog('quick-action', { message: shortcut.label, cite, prompt: shortcut.prompt });
  };

  const handleShortcutClick = (shortcut: IShortcut) => {
    addLog('shortcut-click', shortcut);
  };

  // const handleAiClick = (data: any) => {
  //   addLog('ai-click', data);
  // };

  // // 清空消息
  // const handleClear = () => {
  //   addLog('clear', 'All messages cleared');
  // };

  // // 发送消息
  // const handleSend = (args: any) => {
  //   addLog('send', { content: args.content, cite: args.cite, prompt: args.prompt });
  // };

  // 暂停聊天
  const handleStop = () => {
    addLog('stop', 'Chat stream stopped');
  };

  // 拖拽事件
  const handleDragging = (position: { x: number; y: number; width: number; height: number }) => {
    addLog('dragging', position);
  };

  const handleDragStop = (position: { x: number; y: number; width: number; height: number }) => {
    addLog('drag-stop', position);
  };

  // 调整大小事件
  const handleResizing = (position: { x: number; y: number; width: number; height: number }) => {
    addLog('resizing', position);
  };

  const handleResizeStop = (position: { x: number; y: number; width: number; height: number }) => {
    addLog('resize-stop', position);
  };

  const article = `In the rapidly evolving world of technology...`; // 将原有的长文本提取为变量

  const sessionToUpdate = ref('');
  const newSessionName = ref('');
  const sessionToSwitch = ref('');

  const handleAddNewSession = async () => {
    const newSession = await aiBlueking.value?.addNewSession(`test-${Date.now()}`);
    addLog('add-new-session', newSession);
    if (newSession) {
      sessionToUpdate.value = newSession.sessionCode;
      newSessionName.value = `${newSession.sessionName}-updated`;
      sessionToSwitch.value = newSession.sessionCode;
    }
    return newSession;
  };

  const handleUpdateSessionName = async () => {
    if (!sessionToUpdate.value || !newSessionName.value) {
      alert('请输入要更新的 Session Code 和新名称');
      return;
    }
    const result = await aiBlueking.value?.updateSessionName(
      sessionToUpdate.value,
      newSessionName.value
    );
    addLog('update-session-name', result);
  };

  const handleSwitchToSession = async () => {
    if (!sessionToSwitch.value) {
      alert('请输入要切换的 Session Code');
      return;
    }
    await aiBlueking.value?.switchToSession(sessionToSwitch.value);
    aiBlueking.value?.handleShow(sessionToSwitch.value);
    addLog('switch-to-session', { sessionCode: sessionToSwitch.value });
  };

  onMounted(async () => {
    // await handleAddNewSession();
    // handleSwitchToSession();
  });
</script>

<style lang="scss" scoped>
  .dynamic-playground {
    max-width: 1200px;
    margin: 0 auto;
  }

  .article-section {
    position: relative;
    margin-bottom: 40px;

    :deep(.event-logger) {
      margin-top: 24px;
    }
  }

  .article-card {
    padding: 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    &.mt20 {
      margin-top: 20px;
    }

    h2 {
      margin-bottom: 16px;
      font-size: 24px;
      color: #333;
    }

    > p {
      margin-bottom: 24px;
      color: #666;
    }
  }

  .article {
    padding: 24px;
    margin-bottom: 24px;
    background: #f5f7fa;
    border-radius: 8px;

    h3 {
      margin-bottom: 16px;
      font-size: 20px;
      color: #333;
    }

    p {
      line-height: 1.8;
      color: #666;

      &::selection {
        color: #fff;
        background: rgba(20, 130, 255, 0.8);
      }
    }
  }

  .quick-actions {
    display: flex;
    gap: 16px;
  }

  .test-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;

    input {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      transition: border-color 0.2s;

      &:focus {
        border-color: #1482ff;
        outline: none;
      }
    }
  }

  .action-btn {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    color: #1482ff;
    cursor: pointer;
    background: rgba(20, 130, 255, 0.1);
    border: 1px solid rgba(20, 130, 255, 0.2);
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
      background: rgba(20, 130, 255, 0.15);
      border-color: rgba(20, 130, 255, 0.3);
    }

    .action-icon {
      font-size: 16px;
    }
  }

  .floating-triggers {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ai-image {
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.1);
    }
  }

  .float-image {
    position: relative;
    right: -32px;
    transition: right 0.3s;

    &:hover {
      right: 0;
    }
  }
</style>
